上一篇介紹了Shimmer這個第三方 並建立了自己想要的Widget
這一篇將實際結合API fetch data, 等待http request的時候
顯示Shimmer(之前是用內建的轉圈圈), 當資料回來時顯示原來的資料.

Widget部分
新增了 AnimatedSwitcher, 使得兩個Widget之間的切換更為平順
controller.isLoading condition判斷當前是否有資料,
接著用Key:ValueKey(), 讓AnimatedSwitcher知道是哪兩個widget轉換 (參考)
大家可以隨喜好設定自己想要的變化時間 duration,與進出效果 switchInCurve,

class NewsPage extends GetView<NewsPageController> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('NewsPage')),
      body: SafeArea(
        child: Obx(
          () => AnimatedSwitcher(
            duration: const Duration(milliseconds: 500),
            switchInCurve: Curves.easeIn,
            child: (controller.isLoading)
                // ? Center(child: CircularProgressIndicator())
                ? ListViewShimmer(key: ValueKey<int>(0))
                : ListView.builder(
                    key: ValueKey<int>(1),
                    itemCount: controller.dataList.length,
                    itemBuilder: (_, index) {
                      final title = controller.dataList[index].title;
                      final content = controller.dataList[index].content;
                      return Card(
                        child: ListTile(
                          title: Text(title),
                          subtitle: Text(content),
                        ),
                      );
                    },
                  ),
          ),
        ),
      ),
    );
  }
}

實際效果如下

下一篇將為大家介紹Flutter的FCM推播